<template>
	<div class="content">
		<Title></Title>
		<div class="wrapper">
			<div v-if="!isLogin().login" class="warning">
				<router-link to="/login" v-text="`登录享受更多优惠`"></router-link>
			</div>
			<div v-if="!cart.length" class="null">
				<router-link to="/">
					<span v-text="`购物车还是空的`"></span>
					<em v-text="`去逛逛`"></em>
				</router-link>
			</div>
			<div class="cart-list">
				<ol>
					<li v-for="item in cart" :key="item.id">
						<div class="cart-list-box">
							<div class="avatar" :class="item.activate? 'activate':'' " @click="avatar(item)"></div><!--是否选中-->
							<router-link to="">
								<img :src="item.img" alt=""><!--商品图片-->
							</router-link>
							<div class="info">
								<!--产品介绍-->
								<div class="item-text" v-text="item.name"></div>
								<div class="price-without">
									<span v-text="`售价:`"></span>
									<span v-text="item.price"></span><!--价格-->
								</div>
								<div class="num">
									<div class="xm-input-number">
										<!--减-->
										<div class="input-sub">
											<i class="i-sub" @click="sub(item)"></i>
										</div>
										<div class="input-num" v-text="item.num"></div>
										<!--加-->
										<div class="input-add">
											<i class="i-add" @click="add(item)"></i>
										</div>
									</div>
								</div>
							</div>
							<div class="delete" @click="del(item)"><!--删除-->
								<i></i>
							</div>
						</div>
					</li>
				</ol>
			</div>
		</div>
		<!--价格数量结算-->
		<div class="bottom-submit" v-if="cart.length">
			<div class="box-flex">
				<div class="price-box flex">
					<span v-text="`共${product.num}件 金额:`"></span>
					<br/>
					<strong v-text="product.total"></strong>
					<span v-text="`元`"></span>
				</div>
				<router-link to="/" v-text="`继续购物`" class="flex disable"></router-link>
				<a class="btn flex" v-text="`去结算`" @click="closeAnAccount()"></a>
			</div>
		</div>
		<menus v-if="!cart.length"></menus>
	</div>
</template>

<script type="text/ecmascript-6">
    import {createNamespacedHelpers} from "vuex";
    const {mapState,mapGetters} = createNamespacedHelpers("cart");//mapState放在计算属性//const声明常量
    import Title from "../components/Title";
    import menus from "../components/MenusSlot";
    import cart from "../store/cart";
    export default {
        name: "Cart",
        components: {menus, Title},//注册子组件
	    data(){return {}},
	    computed:{
		    ...mapState(["cart","isInit"]),
		    ...mapGetters(["product"]),
	    },
        methods: { //存储方法往页面传方法
			avatar(item){this.$store.commit("cart/toggle",item)},
	        add(item){if(item.num<5) this.$store.dispatch("cart/add",item);},
	        sub(item){if(item.num>=2) this.$store.dispatch("cart/sub",item)},
	        del(item){
			    this.$store.dispatch("cart/del",item)
	        },
            closeAnAccount(){
				let settleProduct = this.cart.filter((item)=> item.activate === true);
				if(settleProduct.length){//选中商品不为空跳转到订单
                    this.$store.commit("order/init",settleProduct);
                    this.$router.push({path:"/order"});
				}
            },
            isLogin(){//判断用户是否登录
                let cookie = document.cookie.split(";");
                let user = {};
                if(cookie.length){
                    for(let i = 0; i < cookie.length; i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo"){
                            user.userinfo = arr[1];
                            user.login = true;
                        }
                    }
                }
                return user;
            },
        },
	    created(){
            //第一次获取购物车信息
            if(!this.isInit){this.isLogin().login ? this.$store.dispatch("cart/init",this.isLogin().userinfo) : null;}
	    },
        activated(){//组件激活
            this.isLogin().login ? this.$store.dispatch("cart/init",this.isLogin().userinfo) : null;
        },
        mounted(){//dom挂载完毕

        },
        updated(){//组件更新完毕

        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.content
		.wrapper
			padding-top .9rem
			height 100%
			overflow-y auto
			padding-bottom 1rem
			//购物车列表
			.cart-list
				ol
					li
						border-bottom: 1px solid rgba(0,0,0,0.2)
						.cart-list-box
							padding: .24rem 0
							display flex
							position relative
							justify-content flex-start
							align-items center
							.avatar
								background: url("../assets/check_normal.png") 50% 50% no-repeat;
								background-size: .4rem .4rem
								width: .6rem;
								padding: 0 .2rem;
								height: 1.8rem
								display block
							.activate
								background-image url('../assets/check_press.png')
							a
								display: block
								position: relative
								width: 1.8rem
								height: 1.8rem
								margin-right: .2rem
								border: 1px solid rgba(0,0,0,0.2)
								border-radius: 2px
								img
									width: auto;
									height: 100%
							.info
								padding 0
								font-size: .28rem
								line-height: .32rem
								color: #666
								display flex
								flex-direction column
								justify-content space-between
								.item-text
									width: 3.6rem
									font-size: .28rem;
									line-height: .32rem;
									color: rgba(0,0,0,0.8);
									margin-bottom: .12rem;
									margin-right: .3rem;
									display: -webkit-box;
								.price-without//价格
									font-size: .24rem;
									color: #999;
								.num
									flex-grow 0
									.xm-input-number
										display inline-block
										border: 1px solid rgba(0,0,0,0.3)
										font-size 0
										div
											display: inline-block
											width: .6rem
											height: .6rem
											position: relative
											vertical-align: middle
											background-color: #fafafa
											text-align: center
											i
												opacity: .3
												width: .6rem
												height: .6rem
												background-size: .3rem .3rem
												display: inline-block;
												background-color: transparent;
												background-repeat: no-repeat;
												background-position: 50%;
										.input-sub
											i
												background-image url('')
										.input-num
											font-size .32rem
											line-height .6rem
											background white
										.input-add
											i
												background-image url('')
							.delete
								display: flex
								position absolute
								right 0
								top 60%
								margin-right 0.2rem
								flex-direction column
								justify-content flex-end
								i
									width: .6rem
									display: inline-block;
									background-color: transparent;
									background-repeat: no-repeat;
									background-position: 50%;
									background-size: cover
									height: .6rem
									background-image url('')

			.warning
				a
					height: 1.04rem;
					padding: 0 .56rem 0 .32rem;
					position: relative;
					color: rgba(0,0,0,.8)
					display block
					line-height 1.04rem
					font-size .34rem
				a:after
					position absolute
					right .3rem
					content "去登录>"
					font-size .24rem
					color rgba(0,0,0,.54)
		.null
			background: #ebebeb;
			padding: .2rem;
			text-align center
			a
				height: 1.44rem;
				font-size: .24rem;
				text-decoration: none;
				text-align: center
				span
					display: inline-block;
					line-height: .8rem;
					background: url(../../static/public/images/cart/2.png) no-repeat 0;
					background-size: auto 100%;
					padding: 0 .16rem 0 .96rem;
					color: rgba(0,0,0,.27)
				em
					display: inline-block
					border: .01rem solid rgba(0,0,0,.15)
					box-sizing: border-box
					height: .5rem
					line-height: .5rem
					padding: 0 .24rem
					color: rgba(0,0,0,.87)
					font-style: normal
		.bottom-submit
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 99;
			box-shadow: 0 3px 14px 2px rgba(0,0,0,.12);
			.box-flex
				display: flex
				.flex
					-webkit-box-flex: 1;
					-webkit-flex: 1 1 auto;
					flex: 1 1 auto
				.price-box
					font-size: .26rem;
					color: #999;
					width: 100%;
					text-align: center;
					padding-top: .15rem
					strong
						font-size: .4rem
						color: #ff5722
						margin-right: .2em
				.disable
					color: #333
					background: #f4f4f4;
					border: 1px solid #f4f4f4
					text-align: center;
					width: 100%;
					height: 1rem;
					line-height: 1rem;
					font-size: .28rem
				.btn
					outline: 0;
					background: #ff6700;
					color: #fff;
					text-align: center;
					width: 100%;
					height: 1rem;
					line-height: 1rem;
					font-size: .28rem;
</style>